<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/pages/templates/TemplateVisiteur.xhtml">

	<ui:define name="titre">Fun With Videos</ui:define>
	<ui:define name="content">
		<h:head></h:head>
		<h:body>
			<h:form>
				<p:panel>
					<p:inputText id="videocherchee" value="#{mbRecherche.intitule}"
						required="true">
						<f:validateLength minimum="1" />
					</p:inputText>

					<h:commandButton value="Recherche"
						action="#{mbRecherche.rechercherIntitule}" class="btn">
					</h:commandButton>

					<div>

						<!-- 				datatable recherche intitule -->
						<p:dataTable value="#{mbRecherche.videoTrouve}" var="video">
							<p:column headerText="Affiche">
								<p:graphicImage value="resources/images/#{video.affiche}.gif" />
							</p:column>
							<p:column headerText="Titre">
								<h:outputLabel value="#{video.nom}" />
							</p:column>
							<p:column headerText="Durée">
								<h:outputText value="#{video.duree} min" />
							</p:column>
							<p:column headerText="Disponible du">
								<h:outputText value="#{video.dateMiseAdispo}">
									<f:convertDateTime type="date" pattern="dd-MM-yyyy" />
								</h:outputText>
							</p:column>
							<p:column headerText="Au">
								<h:outputText value="#{video.dateFinMiseADispo}">
									<f:convertDateTime type="date" pattern="dd-MM-yyyy" />
								</h:outputText>
							</p:column>
							<!-- 					<p:column headerText="Prix"> -->
							<!-- 						<h:outputLabel /> -->
							<!-- 					</p:column> -->

						</p:dataTable>

					</div>
				</p:panel>
				<p:panelGrid id="msg">
					<p:row>
						<p:column>
							<p:tagCloud model="#{mbNuageTags.model}">
								<p:ajax event="select" update="msg"
									listener="#{mbNuageTags.onSelect}" />
							</p:tagCloud>
						</p:column>
						<p:column>
							<!-- 				datatable de la recherche par tag  -->
							<p:dataTable value="#{mbNuageTags.lesVideos}" var="video">
								<p:column headerText="Affiche">
									<p:graphicImage value="resources/images/#{video.affiche}.gif" />
								</p:column>
								<p:column headerText="Titre">
									<h:outputLabel value="#{video.nom}" />
								</p:column>
								<p:column headerText="Durée">
									<h:outputText value="#{video.duree} min" />
								</p:column>
								<p:column headerText="Disponible du">
									<h:outputText value="#{video.dateMiseAdispo}">
										<f:convertDateTime type="date" pattern="dd-MM-yyyy" />
									</h:outputText>
								</p:column>
								<p:column headerText="Au">
									<h:outputText value="#{video.dateFinMiseADispo}">
										<f:convertDateTime type="date" pattern="dd-MM-yyyy" />
									</h:outputText>
								</p:column>
								<!-- 					<p:column headerText="Prix"> -->
								<!-- 						<h:outputLabel /> -->
								<!-- 					</p:column> -->
							</p:dataTable>
						</p:column>
					</p:row>
				</p:panelGrid>
			</h:form>
		</h:body>
	</ui:define>
</ui:composition>
